import React from 'react';
import useStyle from '../cssinjs/hooks/useStyle';

const MyComponent = () => {
  const className = useStyle({
    color: 'red',
    fontSize: '16px',
    '&:hover': {
      color: 'blue',
    },
    '& .nested': {
      color: 'green',
    },
  }, 'my-component-style');

  return (
    <div className={className}>
      This is a styled component.
      <div className="nested">This is a nested element.</div>
    </div>
  );
};

export default MyComponent;
